<template>
  <div>{{ currentUnit }}</div>
  <div class="unit-container" v-if="currentUnit && changeToUnit">
    <!-- 旋转背景 -->
    <div class="unit-bg unit-bg-animation-rotate">
      <img
        src="../../assets/units/unit-bg.png"
        class="unit-bg-image unit-bg-image-animation-scale"
      />
    </div>

    <!-- 筒条状 -->
    <!-- 固定层 -->
    <div class="unit-bar-container unit-bar-all-animation-scale" ref="unitBarContainer">
      <!-- 抖动层 -->
      <div class="shake-container" ref="shakeContainer">
        <!-- 旋转层 -->
        <img src="../../assets/units/unit-bar.png" class="unit-bar" ref="unitBar" />
      </div>

      <img src="../../assets/units/unit-bar-all.png" class="unit-bar-all" ref="unitBarAll" />
    </div>

    <!-- 波纹 -->
    <div class="unit-wave-container unit-wave-container-animation">
      <div class="unit-wave wave-animation">
        <Wave v-if="isShowWave" />
      </div>
    </div>

    <!-- 筒列表 -->
    <div class="unit-box">
      <div class="unit-list">
        <div class="unit1 unit1-animation">{{ unitChangeList[0] }}</div>
        <div class="unit2 unit2-animation">{{ unitChangeList[1] }}</div>
        <div class="unit3 opacity0 unit3-animation">{{ unitChangeList[2] }}</div>
      </div>
      <div class="unit unit-transition unit-annimation">筒</div>
    </div>
    <div class="real-unit real-unit-color-animation">
      <div class="unit3">{{ unitMap[currentUnit] }}</div>
      <div class="unit">筒</div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, useTemplateRef, watch } from 'vue'
import Wave from './wave.vue'
import { nextTick } from 'vue'

const props = defineProps({
  currentUnit: {
    type: String,
    default: '',
  },
})

defineExpose({
  changeUnit,
})

// 当前筒
const currentUnit = ref('')

// 切成哪个筒
const changeToUnit = ref('')

watch(
  () => props.currentUnit,
  (newValue) => {
    if (!currentUnit.value) {
      currentUnit.value = newValue
      changeToUnit.value = newValue
      nextTick(() => {
        console.log('unitBar', unitBar.value)
        if (unitBar.value) {
          const rotateMap = {
            DOWN: 'rotate(0deg)',
            LEFT: 'rotate(120deg)',
            RIGHT: 'rotate(240deg)',
          }
          const rotate = rotateMap[newValue]
          // 让bar对其到对应位置
          unitBar.value.style.transform = rotate
          unitBarAll.value.style.transform = rotate
          setTimeout(() => {
            // 旋转bar
            rotateUnitBar(newValue, newValue)
          }, 50)
        }
      })
    } else {
      changeUnit(newValue)
    }
  },
  {
    immediate: true,
  },
)

const isShowWave = ref(true)

// 筒改变列表
const units = ref({
  DOWN: ['DOWN', 'RIGHT', 'LEFT'],
  LEFT: ['LEFT', 'DOWN', 'RIGHT'],
  RIGHT: ['RIGHT', 'LEFT', 'DOWN'],
})

// 筒改变列表-中文
const unitChangeList = computed(() => {
  if (!currentUnit.value || !changeToUnit.value) {
    return []
  }
  return units.value[changeToUnit.value].map((unit) => unitMap[unit])
})

const unitMap = {
  LEFT: '左',
  RIGHT: '右',
  DOWN: '下',
}

// 当前筒
const unitBar = useTemplateRef('unitBar')
// 筒
const unitBarAll = useTemplateRef('unitBarAll')
// 筒容器
const unitBarContainer = useTemplateRef('unitBarContainer')
// 抖动部分
const shakeContainer = useTemplateRef('shakeContainer')

/**
 * 旋转 unitBar
 * @param {number} from
 * @param {number} to
 */
function rotateUnitBar(from, to) {
  // 先移除抖动
  if (shakeContainer.value) {
    shakeContainer.value.classList.remove('shake-animation')
  }
  let barRotated = 0
  if (unitBar.value.style.transform) {
    // 已经旋转的度数
    barRotated = parseInt(unitBar.value.style.transform.split('rotate(')[1].split('deg')[0])
  }
  console.log('barRotated', barRotated)
  // 旋转角度
  const rotationAngle = barRotated + getRotationAngle(from, to)
  // 旋转
  unitBar.value.style.transform = `rotate(${rotationAngle}deg)`
  unitBarAll.value.style.transform = `rotate(${rotationAngle}deg)`
  // 2080ms后开始抖动
  setTimeout(() => {
    shakeContainer.value.classList.add('shake-animation')
  }, 2090)
}

// 获取旋转角度
function getRotationAngle(from, to) {
  let rotationAngle = 600
  if (from === to) {
    rotationAngle = 360
  } else if (
    (from === 'DOWN' && to === 'LEFT') ||
    (from === 'LEFT' && to === 'RIGHT') ||
    (from === 'RIGHT' && to === 'DOWN')
  ) {
    rotationAngle = 480
  }
  console.log(from, to, '旋转角度', rotationAngle)
  return rotationAngle
}

function setUnitName(to) {
  console.log('切筒', currentUnit.value, to)
  if (to) {
    changeToUnit.value = to
    // 稍微有个延时变化
    setTimeout(() => {
      currentUnit.value = to
    }, 100)
  }
}

// 关闭波纹
function closeWave() {
  // 动画时长2880，不关闭会导致波纹不一致
  setTimeout(() => {
    isShowWave.value = false
  }, 2880)
}

/**
 * 切筒
 * @param changeTo 切换到
 */
function changeUnit(changeTo) {
  rotateUnitBar(currentUnit.value, changeTo)
  const unitBgDom = document.querySelector('.unit-bg')
  const unitBgImageDom = document.querySelector('.unit-bg-image')
  const waveDom = document.querySelector('.unit-wave')
  const unit1Dom = document.querySelector('.unit1')
  const unit2Dom = document.querySelector('.unit2')
  const unit3Dom = document.querySelector('.unit3')
  const unitTransitionDom = document.querySelector('.unit-transition')
  const realUnitDom = document.querySelector('.real-unit')
  const unitWaveContainerDom = document.querySelector('.unit-wave-container')

  if (
    !unitBgDom ||
    !unitBgImageDom ||
    !waveDom ||
    !unit1Dom ||
    !unit2Dom ||
    !unit3Dom ||
    !unitTransitionDom ||
    !realUnitDom ||
    !unitWaveContainerDom ||
    !unitBarContainer.value
  ) {
    return
  }

  waveDom.classList.remove('wave-animation')
  unitBgDom.classList.remove('unit-bg-animation-rotate')
  unitBgImageDom.classList.remove('unit-bg-image-animation-scale')
  unit1Dom.classList.remove('unit1-animation')
  unit2Dom.classList.remove('unit2-animation')
  unit3Dom.classList.remove('unit3-animation')
  realUnitDom.classList.remove('real-unit-color-animation')
  unitTransitionDom.classList.remove('unit-annimation')
  unitWaveContainerDom.classList.remove('unit-wave-container-animation')
  unitBarContainer.value.classList.remove('unit-bar-all-animation-scale')
  isShowWave.value = true
  setTimeout(() => {
    unitBgDom.classList.add('unit-bg-animation-rotate')
    unitBgImageDom.classList.add('unit-bg-image-animation-scale')
    waveDom.classList.add('wave-animation')
    unit1Dom.classList.add('unit1-animation')
    unit2Dom.classList.add('unit2-animation')
    unit3Dom.classList.add('unit3-animation')
    realUnitDom.classList.add('real-unit-color-animation')
    unitTransitionDom.classList.add('unit-annimation')
    unitWaveContainerDom.classList.add('unit-wave-container-animation')
    unitBarContainer.value.classList.add('unit-bar-all-animation-scale')
    closeWave()
    setUnitName(changeTo)
  }, 100)
}
</script>

<style scoped lang="less">
.unit-container {
  margin: 40px;
  position: relative;
  width: 64px;
  height: 64px;
  background-color: rgb(255, 255, 255);

  .unit-bg {
    position: relative;
    width: 100%;
    height: 100%;

    .unit-bg-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .unit-bg-image-animation-scale {
      animation: unit-bg-image-scale 1.28s linear;
    }

    &.unit-bg-animation-rotate {
      animation: dom-rotate360 1.28s linear;
    }
  }

  .unit-bar-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;

    &.unit-bar-all-animation-scale {
      animation: unit-bg-image-scale 1.28s linear;
    }

    .shake-container {
      width: 46px;
      height: 46px;
    }

    .unit-bar-all {
      position: absolute;
      top: 9px;
      left: 9px;
      width: 46px;
      height: 46px;
      transition: transform 1.28s linear;
    }

    .unit-bar {
      width: 46px;
      height: 46px;
      transition: transform 1.28s linear;
    }

    // 抖动动画
    .shake-animation {
      animation: shake-animation 0.8s linear;
    }
  }

  .unit-wave-container {
    position: absolute;
    top: 9px;
    left: 9px;
    width: 46px;
    height: 46px;
    overflow: hidden;
    border-radius: 50%;
    z-index: 0;

    &.unit-wave-container-animation {
      animation: wave-animation-scale 2.88s linear;
    }

    .unit-wave {
      position: absolute;
      left: -10px;
      top: 40px;
      width: 100%;
      height: 100%;
      z-index: 100;
      transform: scale(0.8);
    }

    .wave-animation {
      animation: wave-animation 2.88s linear;
    }
  }

  .unit-box,
  .real-unit {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 48px;
    height: 48px;
    overflow: hidden;
    z-index: 3;
    font-weight: 500;
    font-size: 16px;
    color: #fff;
  }

  .real-unit {
    color: #2283e2;

    &.real-unit-color-animation {
      animation: real-unit-color-animation 1.92s linear;
    }
  }

  .unit,
  .unit1,
  .unit2,
  .unit3 {
    position: absolute;
    width: 16px;
    height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
  }

  .unit {
    top: 16px;
    right: 8px;
  }

  .unit-annimation {
    animation: unit-annimation 2.88s linear;
  }

  .unit1,
  .unit2,
  .unit3 {
    left: 8px;
  }

  .unit1 {
    top: -16px;
    opacity: 0;
  }

  .unit2 {
    top: 0px;
    opacity: 0;
  }

  .unit3 {
    top: 16px;
  }

  .unit1-animation {
    animation: unit1-animation 2.88s linear;
  }

  .unit2-animation {
    animation: unit2-animation 2.88s linear;
  }

  .unit3-animation {
    animation: unit3-animation 2.88s linear;
  }
}

.opacity0 {
  opacity: 0;
}

@keyframes dom-rotate360 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 1280ms */
@keyframes unit-bg-image-scale {
  0% {
    transform: scale(1);
  }

  /* 680ms */
  53.13% {
    transform: scale(1);
  }

  /* 840ms */
  65.63% {
    transform: scale(1.1);
  }

  /* 1000ms */
  78.13% {
    transform: scale(0.9);
  }

  /* 1160ms */
  90.63% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

/* 2880ms */
// 第720毫秒：100% 第880毫秒:110% 第1040毫秒:90% 第1200毫秒:105% 第1360毫秒:100%
// 从第0毫秒到第800毫秒：位置上移42； 从第1800毫秒到第2200毫秒：位置下移42；
@keyframes wave-animation-scale {
  0% {
    transform: scale(1);
  }

  /* 720ms */
  25% {
    transform: scale(1);
  }

  /* 880ms */
  30.56% {
    transform: scale(1.1);
  }

  /* 1040ms */
  36.11% {
    transform: scale(0.9);
  }

  /* 1200ms */
  41.67% {
    transform: scale(1.05);
  }

  /* 1360ms */
  47.22% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}

// 2880ms
@keyframes wave-animation {
  0% {
    top: 42px;
    transform: scale(1);
  }

  // 800ms
  27.78% {
    top: -4px;
  }

  //  1880ms
  65.28% {
    top: -4px;
  }

  // 2200ms
  76.39% {
    top: 42px;
  }

  /* 720ms */
  25% {
    transform: scale(1);
  }

  /* 880ms */
  30.56% {
    transform: scale(1.1);
  }

  /* 1040ms */
  36.11% {
    transform: scale(0.9);
  }

  /* 1200ms */
  41.67% {
    transform: scale(1.05);
  }

  /* 1360ms */
  47.22% {
    transform: scale(1);
  }

  100% {
    // transform: scale(1);
    top: 42px;
  }
}

/* 2880ms */
// 从1120毫秒到第1280毫秒--不透明度100%到0%，位置向下移动18
@keyframes unit3-animation {
  0% {
    opacity: 0;
    top: 16px;
  }

  30% {
    opacity: 0;
    top: 16px;
  }

  // 960
  33.33% {
    opacity: 1;
    top: 16px;
  }

  // 1120
  38.89% {
    opacity: 0;
  }

  // 1280
  44.44% {
    opacity: 0;
    top: 32px;
  }

  100% {
    opacity: 0;
    top: 32px;
  }
}

/* 2880ms */
// 从1120毫秒到第1280毫秒--不透明度0%到100%，位置向下移动18（到坐标位置）；从第1280毫秒到1440毫秒--不透明度100%到0%，位置向下移动18；
@keyframes unit2-animation {
  0% {
    opacity: 0;
    top: 0;
  }

  // 1120
  38.89% {
    opacity: 0;
    top: 0;
  }

  // 1280
  44.44% {
    opacity: 1;
    top: 16px;
  }

  // 1440
  50% {
    opacity: 0;
    top: 32px;
  }

  100% {
    opacity: 0;
    top: 32px;
  }
}

// 从第1280毫秒到1440毫秒--不透明度0%到100%，位置向下移动20（即，到坐标位置再向下2）；到1560毫秒，位置上移3；到1680毫秒，位置下移1（到坐标位置）
@keyframes unit1-animation {
  0% {
    opacity: 0;
    top: -16px;
  }

  // 1280
  44.44% {
    opacity: 0;
    top: -16px;
  }

  // 1440
  50% {
    opacity: 1;
    // 16+2
    top: 18px;
  }

  // 1560
  54.16% {
    opacity: 1;
    // 16-3
    top: 13px;
  }

  //1680
  58.33% {
    opacity: 1;
    top: 16px;
  }

  100% {
    opacity: 1;
    top: 16px;
  }
}

/* 1920ms */
@keyframes real-unit-color-animation {
  0% {
    opacity: 0;
  }

  /* 从第1800毫秒到1920毫秒--白色字由不透明度100%到0%；蓝色字由不透明度0%到100%； */

  93.75% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

// 2880
@keyframes unit-annimation {
  0% {
    opacity: 0;
  }

  // 773.76
  26.8% {
    opacity: 0;
  }

  // 960
  30.2% {
    opacity: 0;
  }
  33.53% {
    opacity: 1;
  }

  // 1120
  38.89% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

// 800ms
// 第2080毫秒：0 第2240(160ms)毫秒:+15 第2400(320ms)毫秒:-12 第2560(480ms)毫秒:+8 第2720(640ms)毫秒:-6 第2880(800ms)毫秒:0
@keyframes shake-animation {
  // 0
  0% {
    transform: rotate(0deg);
  }

  // 160ms
  20% {
    transform: rotate(15deg);
  }

  // 320ms
  40% {
    transform: rotate(-12deg);
  }

  // 480ms
  60% {
    transform: rotate(8deg);
  }

  // 640ms
  80% {
    transform: rotate(-6deg);
  }

  // 800ms
  100% {
    transform: rotate(0deg);
  }
}
</style>
